<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="environment.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-environment" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="environment.tab.advanced" class="nav-link" data-toggle="tab" href="#sieve-widget-advanced" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="environment.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-environment" role="tabpanel">

        <div class="mb-3">
          <h5 data-i18n="environment.name" ></h5>
          <div id="sivEnvironmentName"
               data-list-dropdown="#sivEnvironmentNameTemplate">
          </div>

          <div id="sivEnvironmentNameTemplate" class="d-none">
              <div class="dropdown-menu dropdown-menu-right">
                  <button class="dropdown-item" type="button" data-value="domain">
                    <div>domain</div>
                    <small data-i18n="environment.name.domain" class="text-muted"></small>
                  </button>
                  <button class="dropdown-item" type="button" data-value="host">
                    <div>host</div>
                    <small data-i18n="environment.name.host" class="text-muted"></small>
                  </button>
                  <button class="dropdown-item" type="button" data-value="location">
                    <div>location</div>
                    <small data-i18n="environment.name.location" style="white-space: pre-line" class="text-muted"></small>
                  </button>
                  <button class="dropdown-item" type="button" data-value="name">
                    <div>name</div>
                    <small data-i18n="environment.name.name" class="text-muted"></small>
                  </button>
                  <button class="dropdown-item" type="button" data-value="phase">
                    <div>phase</div>
                    <small data-i18n="environment.name.phase" style="white-space: pre-line" class="text-muted"></small>
                  </button>
                  <button class="dropdown-item" type="button" data-value="remote-host">
                    <div>remote-host</div>
                    <small data-i18n="environment.name.remotehost" style="white-space: pre-line" class="text-muted"></small>
                  </button>
                  <button class="dropdown-item" type="button" data-value="remote-ip">
                    <div>remote-ip</div>
                    <small data-i18n="environment.name.remoteip" class="form-text text-muted"></small>
                  </button>
                  <button class="dropdown-item" type="button" data-value="version">
                    <div>version</div>
                    <small data-i18n="environment.name.version" class="text-muted"></small>
                  </button>
                </div>

          </div>

          <br />
          <div id="sivEnvironmentMatchTypes"> </div>

          <br />
          <h5 data-i18n="environment.keys"></h5>
          <div id="sivEnvironmentKeyList"> </div>

        </div>
      </div>
      <div class="tab-pane fade" id="sieve-widget-advanced" role="tabpanel">
        <div id="sivEnvironmentComparator"> </div>
      </div>
      <div data-i18n="environment.help" style="white-space: pre-line" class="tab-pane fade form-text" id="sieve-widget-help" role="tabpanel">
      </div>
    </div>
  </div>
</div>